<script setup lang="ts">
import { ButtonProps } from '@/types/common/components.ts';
import { computed, CSSProperties } from 'vue';

const props = withDefaults(defineProps<ButtonProps>(), {
  iconPrefix: '',
  iconSuffix: '',
  type: 'button',
  disabled: false,
  loading: false,
  round: '4px',
  theme: 'default',
  color: '#606266',
  hoverColor: '#ffffff',
  size: '1rem',
  style: (): CSSProperties => {
    return {
      '--portal-color': '#606266',
      '--portal-color-hover': '#ffffff',
    };
  },
});
const emit = defineEmits(['click']);
const handleClick = (evt: any) => {
  emit('click', evt);
};

// 是否禁用按钮
const isDisabled = computed(() => {
  return props.loading || props.disabled;
});
// 自定义样式
const customStyle = computed(() => {
  let style = props.style;
  style['--portal-color'] = props.color;
  style['--portal-color-hover'] = props.hoverColor;
  style.borderRadius = props.round;
  return style;
});
const disabledClass = computed(() => {
  if (props.loading || props.disabled) {
    return 'active';
  } else {
    return '';
  }
});
// 计算样式
const customClass = computed(() => {
  return 'portal-button-' + props.theme;
});
</script>

<template>
  <button
    class="portal-button"
    :class="[customClass, disabledClass]"
    :disabled="isDisabled"
    :style="customStyle"
    @click="handleClick"
  >
    <span v-if="isDisabled" class="portal-button-svg">
      <svg-icon name="icon-com-loading_new" />
    </span>
    <span v-if="props.iconPrefix !== '' && isDisabled === false" class="portal-button-icon">
      <svg-icon :name="props.iconPrefix" />
    </span>
    <span><slot /></span>
    <span v-if="props.iconSuffix !== '' && isDisabled === false" class="portal-button-icon">
      <svg-icon :name="props.iconSuffix" />
    </span>
  </button>
</template>

<style scoped lang="scss">
.portal-button {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: var(--portal-color);
  appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  user-select: none;
  padding: 12px 20px;
  font-size: 1rem;
  border-radius: 4px;
  span {
    padding: 0 5px;
    box-sizing: border-box;
  }
  .portal-button-svg {
    animation: rotating 2s linear infinite;
    svg {
      fill: var(--portal-color);
    }
  }
}
/*****default*****/
.portal-button.portal-button-default {
  color: #606266;
  svg {
    fill: #606266;
  }
}
.portal-button.portal-button-default.active,
.portal-button-default:hover,
.portal-button-default:focus {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  svg {
    fill: #409eff;
  }
}
.portal-button-default:active {
  border-color: #409eff;
}
/*****primary*****/
.portal-button.portal-button-primary {
  color: #ffffff;
  border-color: #409eff;
  background-color: #409eff;
  svg {
    fill: #ffffff;
  }
}
.portal-button.portal-button-primary.active,
.portal-button-primary:hover,
.portal-button-primary:focus {
  border-color: #66b1ff;
  background-color: #66b1ff;
}
.portal-button-primary:active {
  border-color: #1b8afa;
  background-color: #1b8afa;
}
/*****success*****/
.portal-button.portal-button-success {
  color: #ffffff;
  border-color: #67c23a;
  background-color: #67c23a;
  svg {
    fill: #ffffff;
  }
}
.portal-button.portal-button-success.active,
.portal-button-success:hover,
.portal-button-success:focus {
  border-color: #85ce61;
  background-color: #85ce61;
}
.portal-button-success:active {
  border-color: #67c23a;
  background-color: #67c23a;
}
/*****info*****/
.portal-button.portal-button-info {
  color: #ffffff;
  border-color: #909399;
  background-color: #909399;
  svg {
    fill: #ffffff;
  }
}
.portal-button.portal-button-info.active,
.portal-button-info:hover,
.portal-button-info:focus {
  border-color: #a6a9ad;
  background-color: #a6a9ad;
}
.portal-button-info:active {
  border-color: #828489;
  background-color: #828489;
}
/*****warning*************/
.portal-button.portal-button-warning {
  color: #ffffff;
  border-color: #e6a23c;
  background-color: #e6a23c;
  svg {
    fill: #ffffff;
  }
}
.portal-button.portal-button-warning.active,
.portal-button-warning:hover,
.portal-button-warning:focus {
  border-color: #ebb563;
  background-color: #ebb563;
}
.portal-button-warning:active {
  border-color: #c69548;
  background-color: #c69548;
}
/*****danger*************/
.portal-button.portal-button-danger {
  color: #ffffff;
  border-color: #f56c6c;
  background-color: #f56c6c;
  svg {
    fill: #ffffff;
  }
}
.portal-button.portal-button-danger.active,
.portal-button-danger:hover,
.portal-button-danger:focus {
  border-color: #f78989;
  background-color: #f78989;
}
.portal-button-danger:active {
  border-color: #ce6965;
  background-color: #ce6965;
}

.portal-button::-moz-focus-inner {
  border: 0;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1turn);
  }
}
</style>
